<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>仿照163邮箱登录页面</title>
<!-- 禁用响应式布局   <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <meta name="description" content="">
    <meta name="author" content="">

 		<!-- Bootstrap -->
		<link href="${baseUrlStatic}/css/Bootstrap/bootstrap.min.css" rel="stylesheet">
    	
    <style type="text/css">
    
      body, textarea, input, select, button {
	    color: #333333;
	    font-family: Helvetica,STHeiti,"Microsoft Yahei","微软雅黑","宋体";
	    font-size: 14px;
	  }
    
      .navbar {
	    margin-bottom: 0px;
	  }
      
       /* Wrapper for page content to push down footer */
      #wrap {
        background:url("http://mimg.127.net/index/163/themes/130905_midmoon_bg.jpg");
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
        /*margin: 0 auto -60px;*/
        margin: 0 auto 10px;
      }
      
      #footer {
        height: 60px;
      }
      #footer {
        background-color: #f5f5f5;
      }
      
      .container {
        width: 1000px;
        max-width: 1100px;
      }
      
      .container .credit {
        margin: 20px 0 0 200px;
      }
      
	  .background{
	  	border-radius: 8px 8px 8px 8px;
	    background:  no-repeat rgba(234, 239, 247, 0.95);
	    left: 0;
	    right: 0;
	    width: 355px;
	    position: absolute;
	    margin-top: 85px;
	    margin-bottom: 10px;
	    margin-right: 86px;
	    margin-left:800px;
	  }
	  
	  .testlogin{
	  	padding:85px 150px 90px 20px;
	  	height:300px;
	  }
	  
	  .formLogin{
	    background: none no-repeat;
	    left: 0;
	    right: 0;
	    width: 295px;
	    position: absolute;
	    margin-top: 115px;
	    margin-bottom: 10px;
	    margin-right: 86px;
	    margin-left:830px;
	  }
	  
	  .btn-lg {
	    line-height: 1;
	    margin-top: 15px;
	    padding: 10px 35px;
	  }
	  
    </style>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//cdnjs.bootcss.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
    <![endif]-->
    
    
    
  </head>

  <body>

     <!-- Static navbar -->
    <div class="navbar navbar-static-top navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <!-- 页面缩小后，导航收缩为3个横杠，可以展开导航 -->
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">偶像徐公子</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">主页</a></li>
            <li><a href="#about">公告管理</a></li>
            <li><a href="#contact">系统配置</a></li>
            <li><a href="#contact">信息查询</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">用户管理 <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">系统管理员管理</a></li>
                <li><a href="#">普通用户管理</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <p class="navbar-text">此景只应<a  href="http://www.baidu.com" class="navbar-link">天上</a>有</p>
<!--            <li><a href="../navbar/">Default</a></li>-->
<!--            <li class="active"><a href="./">Static top</a></li>-->
<!--            <li><a href="../navbar-fixed-top/">Fixed top</a></li>-->
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    
    <div class="background">
      <div class="testlogin">
      </div>
    	
    </div>
    <div id="login" class="formLogin">
	   <form role="form" action="/system/login/check" method="post">
		  <div class="form-group">
		    <label>用户名</label>
		    <input name="userName" type="text" class="form-control" id="exampleInputEmail1" placeholder="Username">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputPassword1">密码</label>
		    <input name="passWord" type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
		  </div>
		  <div class="checkbox">
		    <label>
		      <input type="checkbox"> 记住我
		    </label>
		    <a style="margin-left:145px;font-size:12px;">忘记密码了？</a>
		  </div>
		  <button type="submit" class="btn btn-primary btn-lg">登陆</button>
		  <button type="button" class="btn btn-info btn-lg" onclick="registerDialog();" style="margin-left:60px">注册</button>
	   </form>
    </div>

 


<!-- Part 1: Wrap all page content here -->
    <div id="wrap">
    <div class="container">
	          <img src="http://mimg.127.net/index/163/themes/130905_midmoon_cnt.jpg" alt="">
	         
    </div> <!-- /container -->
    
    </div>
    
    <!-- 登陆失败弹出窗口 -->
	<div class="modal fade" id="errorMessage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog" style="padding-top: 130px;width: 400px;">
	    <div class="modal-content">
	      <div class="modal-header" style="background-color: #000000;">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: #FFFFFF;">&times;</button>
	        <h5 class="modal-title" id="myModalLabel" style="color: #FFFFFF;">登录失败！</h4>
	      </div>
	      <div class="modal-body">
	        &nbsp;&nbsp;${loginStatus}！
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
    
    <!-- 注册弹出窗口 -->
	<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog" style="padding-top: 80px;">
	  <form class="form-horizontal" role="form" action="/system/login/register" method="post">
	    <div class="modal-content">
	      <div class="modal-header" style="background-color: #99CCFF;">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <span class="modal-title" id="myModalLabel" style="font-size: 16px;">注册用户</span>
	      </div>
	      <div class="modal-body">
	      
			  <div class="form-group">
			    <label class="col-sm-2 control-label formFont">用户名</label>
			    <div class="col-sm-5">
			    	<input name="userName" type="text" class="form-control" id="userName" placeholder="用户名">
		    	</div>
			    <div class="col-sm-5 prompt">
			    	<span style="color: red;">*</span><span style="color: #999999;">&nbsp;只允许输入或字母或下划线</span>
		    	</div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label formFont" for="exampleInputPassword1">密码</label>
			    <div class="col-sm-5">
			    	<input name="passWord" type="password" class="form-control" id="passWord" placeholder="密码">
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label formFont">确认密码</label>
			    <div class="col-sm-5">
			    	<input name="confirmPass" type="password" class="form-control" id="confirmPass" placeholder="确认密码">
		    	</div>
			  </div>
			  <div class="form-group">
			    <label for="inputEmail3" class="col-sm-2 control-label formFont">邮件地址</label>
			    <div class="col-sm-5">
			    	<input name="email" type="email" class="form-control" id="email" placeholder="email">
		    	</div>
			  </div>
	      </div>
	      <div class="modal-footer">
	      	<div id="dangerAlert" class="alert alert-danger pull-left" style="display: none;">
			      <strong>Sorry!</strong> 注册失败.
		    </div>
	        <button type="button" class="btn btn-default" onclick="register()">确定 </button>
	      </div>
	    </div><!-- /.modal-content -->
	    </form>
	  </div><!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
    
    <div id="footer">
      <div class="container pull-right">
        <p class="muted credit">版权所有，盗版必究  <a href="http://www.baidu.com">Made by us.</a> <a href="http://www.google.com.hk">2013.9.1</a></p>
      </div>
    </div>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
   	<script type="text/javascript" src="${baseUrlStatic}/js/Bootstrap/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="${baseUrlStatic}/js/Bootstrap/bootstrap.min.js"></script>

  </body>
</html>
    <script type="text/javascript">
    	$(document).ready(function(){
			var loginStatus = "${loginStatus}";
			if(loginStatus){
				$("#errorMessage").modal('show');
			}
    	});
    	
    	function registerDialog(){
    		$(document).ready(function(){
   				$("#register").modal('show');
   				$("#dangerAlert").hide();
        	});
    	}
    	
    	function register(){
    		var user = {};
    		user.userName = $("#userName").val();
    		user.passWord = $("#passWord").val();
    		user.email = $("#email").val();
    		$.ajax({
                type:"POST",
                url:"/system/user/register",
                data:user,
                dataType:"json",
                success:function(data){
                	var status = data.status;
                	if(status == "success"){
                		$("#dangerAlert").show();
                		document.getElementById("dangerAlert").innerHTML= data.message; 
                	}else{
                		$("#dangerAlert").show();
                		document.getElementById("dangerAlert").innerHTML= data.message; 
                	}
                },
                error:function() {
                	$("#dangerAlert").show();
		        }
            });
    	}

    
    </script>